<template>
	<view class="ticket-detail-page">
		<view class="wrap" v-if="info.orderNum">
			<view class="statue-title" :class="info.orderStatus == 3 ? 'cancle-title' : ''">{{
        info.orderStatus | orderStatusFilter
      }}</view>
			<view class="status-text">
				{{ showOrderStatusTxt(info.orderStatus) }}
			</view>
			<view class="ticket-list">
				<view class="ticket-item">
					<view class="ticket-title">
						<view class="title" v-for="(it, index) in info.detaildVoList || []" :key="it.orderDetailsId" v-if='index == 0'>
							<image :src="img_baseUrl + it.goodPic"></image>
							<text>{{ it.commonName }}</text>
						</view>
						<view :class="['status', `status_${info.orderStatus}`]">
							{{ info.orderStatus | orderStatusFilter }}
						</view>
					</view>
					<view class="ticket-cards">
						<view class="ticket-card" v-for="(it, index) in info.detaildVoList || []" :key="it.orderDetailsId" v-if='index == 0'>
							<view class="top" >
								<view class="ticket-name">{{ `${it.ticketName}` }}</view>
								<view class="ticket-price">¥{{ it.ticketMoney.toFixed(2) }}</view>
							</view>
							<view class="bottom">
                <view class="ticket-validity">{{it.ticketUsetimeStart}}<text class="tcan">至</text>{{it.ticketUsetimeEnd}}<text class="tcan">可用</text></view>
								<view class="tnum">{{it.ticketCount}}张</view>
							</view>
					</view>
						</view>
						<!-- <view class="pay_cou" v-if="info.couponAmount">
			  <text>优惠券</text>
			  <text class="cou_num">-￥{{(info.couponAmount / 100).toFixed(2)}}</text>
		  </view> -->
						<view class="pay">
							{{info.orderStatus == 1 ? '应付金额：' : '实付金额：'}}
							<text style="margin-left: 16rpx">¥{{ (info.orderTotalPrice / 100).toFixed(2) }}</text>
						</view>
					</view>
				</view>
				<!--        二维码-->
				<view class="card-code" v-if="info.orderStatus == 2">
					<view class="tip">使用二维码入场 / 换取纸质票</view>
					<view class="qr-code" v-if="qrcodeText">
						<tki-qrcode ref="qrcode" cid="ticket" :onval="true" :size="300" :showLoading="false"
							:val="qrcodeText" />
					</view>
          <view class="card-item">
            <view class="card-title" @click="showCard = !showCard"> 
              <text>游客信息</text>
              <image :src="showCard ? `${img_baseUrl}/statics/std/static/arr_up.png` : `${img_baseUrl}/statics/std/static/arr_down.png`"></image>
            </view>
            <view v-if="showCard" class="item" v-for='(item, index) in info.detaildVoList' :key="index">
              <text>{{ item.identityName }}</text>
              <text> {{ item.identityPhone || ''}} </text>
              <text> {{ item.identityDocumentDetails ? item.identityDocumentDetails.replace(/(.{6}).*(.{4})/, '$1********$2') : ''}} </text>
            </view>
          </view>
				</view>
				<!-- 证件信息       -->
				<view class="card-info" v-if="info.orderStatus != 2">
					<view class="card-info-list">
						<view class="info-item">
              <view class="card-info-title"> 游客信息 </view>
              <view class="item" v-for='(item, index) in info.detaildVoList' :key="index">
                <text>{{ item.identityName }}</text>
                <text> {{ item.identityPhone || ''}} </text>
                <text> {{ item.identityDocumentDetails ? item.identityDocumentDetails.replace(/(.{6}).*(.{4})/, '$1********$2') : ''}} </text>
              </view>
						</view>
					</view>
				</view>
				<!-- 订单信息       -->
				<view class="card-info">
					<view class="card-info-list">
						<view class="info-item">
              <view class="card-info-title"> 订单信息 </view>
							<view class="p">
								<view class="label">订单编号</view>
								<view class="label-text"> {{ info.orderNum }} </view>
							</view>
							<view class="p mt24">
								<view class="label">下单时间</view>
								<view class="label-text"> {{ info.orderTime }} </view>
							</view>
							<view class="p mt24" v-if="info.payTime">
								<view class="label">支付时间</view>
								<view class="label-text"> {{ info.payTime ? info.payTime : info.orderTime }} </view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!--  按钮      -->
			<view class="btns">
				<block v-if="info.orderStatus == 1">
					<view class="btn outline w240" style="margin-right: 24rpx" @click.stop="cancelOrder">取消订单</view>
					<view class="btn primary w422" @click.stop="getPayOrderInfo(id)">去支付</view>
				</block>

				<block v-if="info.orderStatus == 2">
					<view class="btn outline icon-service" @click.stop="callNiMa">
						联系客服
					</view>
				</block>
				<block v-if="info.orderStatus == 3">
					<view class="btn outline" @click.stop="delOrder">删除订单</view>
				</block>
			</view>

			<!--      证件信息弹框-->
			<uni-popup ref="popup" type="bottom" :backgroundColor="'#f7f9fa'" :transStyle="{
        borderTopLeftRadius: '40rpx',
        borderTopRightRadius: '40rpx',
        overflow: 'hidden',
      }">
				<view class="popup-content">
					<view class="title">
						证件信息
						<image :src="`${img_baseUrl}/statics/std/static/delete2.png`" @click="closePopup">
						</image>
					</view>
					<view class="card-info-list">
						<view class="info-item" style="margin-top: 40rpx" v-for='(item, index) in info.detaildVoList' :key='index'>
							<view class="name">
								<text>{{ item.identityName }}</text>
								<view class="tag">{{ item.ticketName }}</view>
							</view>
							<view class="p mt24">
								<view class="label">联系电话</view>
								<view class="label-text"> {{ item.identityPhone }} </view>
							</view>
							<view class="p mt24" v-if='item.identityDocumentDetails && item.identityDocumentDetails !== ""'>
								<view class="label">证件类型</view>
								<view class="label-text"> 身份证 </view>
							</view>
							<view class="p mt24" v-if='item.identityDocumentDetails && item.identityDocumentDetails !== ""'>
								<view class="label">证件号码</view>
								<view class="label-text"> {{ item.identityDocumentDetails }} </view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
</template>

<script>
	import tkiQrcode from "tki-qrcode";
	import dayjs from "dayjs";
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import requestPost, {
		requestGet
	} from "@/utils/request";
	import {
		ticketOrderStatus
	} from "@/utils/constant";
	import {
		throttle
	} from '@/utils/index.js'

	export default {
		components: {
			tkiQrcode,
			uniPopup
		},
		props: ["id", "type"],
		data() {
			return {
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
				headerClassName: "headerClassBg",
				info: {},
				countdownInterval: null,
				backTime: 0,
				orderNum: "",
        showCard: false
			};
		},
		filters: {
			orderStatusFilter: function(value) {
				return ticketOrderStatus[value] || "null";
			},
			orderStatusTxtFilter: function(value) {
				return ticketOrderTxtStatus[value] || "null";
			},
		},
		computed: {
			time() {
				if (this.countdownInterval) {
					return dayjs(this.backTime).format("m分s秒");
				} else {
					return "0分0秒";
				}
			},
			qrcodeText() {
				return `${this.orderNum}&type=${this.type}`;
			},
		},
		mounted() {
			if (this.id) {
				this.getDetail();
			}
		},
		methods: {
			getDetail() {
				let api;
				if (this.type == 'jq') {
					api = '/order/scenicTicketBusinessOrder/detailApplectScenicOrder'

				} else if (this.type == 'act') {
					api = '/order/activityTicketBusinessOrder/detailApplectActivityOrder'
				}
				requestGet(api, {
					orderId: this.id,
				}).then((res) => {
					if (res.code === 200) {
						this.orderNum = res.data.orderNum
						const detail = res.data || {};
						detail.detaildVoList = detail.detaildVoList.map((v) => Object.assign(
							v, {
								ticketUsetimeStart: dayjs(v.ticketUsetimeStart).format(
									'MM-DD HH:mm'),
								ticketUsetimeEnd: dayjs(v.ticketUsetimeEnd).format(
									'MM-DD HH:mm')
							}));
						detail.commonName = detail.detaildVoList[0]?.commonName;
						detail.commonPic = detail.detaildVoList[0]?.commonPic;
            detail.identityCheckType = detail.ticTicketAttributeOrder.identityCheckType || 0;
            if(detail.identityCheckType != 3){
              detail.detaildVoList = [detail.detaildVoList[0]]
            }
						this.info = detail;
						if (detail.orderStatus == 2) {
							this.$nextTick(() => {
								this.$refs.qrcode && this.$refs.qrcode._makeCode();
							});
						}
						if (res.data.residueTimeNum && res.data.residueTimeNum > 0) {
						  this.backTime =  this.info.residueTimeNum
						  this.countdownInterval = setInterval(() => {
						    if(this.backTime > 0){
						      this.backTime = (this.backTime - 1000 < 0) ? 0 : (this.backTime - 1000)
						    }else{
						      clearInterval(this.countdownInterval);
						      // this.getDetail();
						    }
						  }, 1000);
						}
					}
				});
			},
			onPageScroll(e) {
				if (e.scrollTop > 100) {
					this.headerClassName = "headerClass";
				} else {
					this.headerClassName = "headerClassBg";
				}
			},
			link(url) {
				if (url) {
					uni.navigateTo({
						url,
					});
					return;
				}
				uni.showToast({
					title: "跳转",
				});
			},
			// 取消订单
			cancelOrder() {
				const _this = this;
				uni.showModal({
					title: "提示",
					content: "确定要取消该订单吗？",
					success: function(res) {
						if (res.confirm) {
							console.log("用户点击确定");
							let api;
							if (_this.type == 'jq') {
								api = `/order/scenicTicketBusinessOrder/cancleOrder/${_this.id}`
							} else if (_this.type == 'act') {
								api = `/order/activityTicketBusinessOrder/cancleOrder/${_this.id}`
							}
							requestGet(api).then(
								(res) => {
									if (res.code === 200) {
										uni.showToast({
											title: "已取消",
											icon: "none"
										});
										uni.navigateBack({
											delta: 1
										});
									}
								}
							);
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			//     删除订单
			delOrder() {
				const _this = this;
				uni.showModal({
					title: "提示",
					content: "确定要删除该订单吗？",
					success: function(res) {
						if (res.confirm) {
							let api;
							if (_this.type == 'jq') {
								api = `/order/scenicTicketBusinessOrder/deleteOrder/${_this.id}`
							} else if (_this.type == 'act') {
								api = `/order/activityTicketBusinessOrder/deleteOrder/${_this.id}`
							}
							requestGet(api).then(
								(res) => {
									if (res.code === 200) {
										uni.showToast({
											title: "已删除",
											icon: "none"
										});
										uni.navigateBack({
											delta: 1
										});
									}
								}
							);
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			},
			openPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
			// 支付前获取订单详细
			getPayOrderInfo: throttle(function(orderId) {
				if (this.isSubmitting) return;
				this.isSubmitting = true;
				const that = this;
				let api;
				if (that.type == 'jq') {
					api = `/pay/pay/transactions/scenic/${that.id}`
				} else if (that.type == 'act') {
					api = `/pay/pay/transactions/activity/${that.id}`
				}
				requestGet(api).then((res) => {
					if (res.code === 200) {
						console.log('获取了支付的数据', res)
						//调用微信官方支付接口弹出付款界面,输入密码扣款
						wx.requestPayment({
							provider: "wxpay",
							timeStamp: String(res.data.timeStamp),
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success(res) {
								console.log("success:" + JSON.stringify(res));
								uni.redirectTo({
									url: `/page_index/ticket/result?state=1&id=${that.id}&type=${that.type}`,
								});
							},
							fail(err) {
								console.log("fail:" + JSON.stringify(err));
								uni.redirectTo({
									url: `/page_index/ticket/result?state=0&id=${that.id}&type=${that.type}`,
								});
							},
						});
						this.isSubmitting = false;
					} else {
						uni.showToast({
							title: '调起支付失败！',
							icon: 'none'
						})
					}
				})
			}, 500),
			// 拨打电话
			callNiMa() {
				if (!this.info.phone) {
					uni.showToast({
						title: "暂无联系电话",
						icon: "none",
					});
					return;
				}
				uni.makePhoneCall({
					phoneNumber: this.info.phone, //仅为示例
				});
			},
			showOrderStatusTxt(value) {
				value = value * 1
				switch (value) {
					case 1:
						return `${this.time}后订单自动取消`;
						break;
					case 2:
						return `请使用二维码入场 / 换取纸质票`;
						break;
					case 3:
						return `订单已取消，欢迎下次使用～`;
						break;
					case 4:
						return `已核销`;
						break;
					case 5:
						return `物流单号：${this.info.orderTcode}`;
						break;
					case 6:
						return `已原路退回至支付账号，请注意查收`;
						break;
				}
			},
		},
	};
</script>

<style lang="scss">
	.ticket-detail-page {
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #F5F7F6;

		.wrap {
			min-height: 100vh;
			background: #F5F7F6;
      padding: 24rpx;
      padding-bottom: 200rpx;
		}

		.statue-title {
		  font-size: 40rpx;
		  font-weight: 500;
		  color: rgba(0, 0, 0, 0.9);
		  line-height: 56rpx;
		  padding-bottom: 8rpx;
		  padding-top: 24rpx;
		}
		.cancle-title{
		  color: rgba(0,0,0,0.5) !important;
		}

		.status-text {
			font-size: 24rpx;
			font-weight: 250;
			color: rgba(0,0,0,0.5);
			line-height: 34rpx;
			padding-bottom: 40rpx;
		}

		.ticket-item {
			background: #ffffff;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 24rpx;
			.ticket-title {
				display: flex;
				align-items: center;
        border-bottom: 2rpx solid rgba(0,0,0,0.1);
        padding-bottom: 24rpx;
				.title {
					flex: 1;
					margin-right: 24rpx;
					display: flex;
					align-items: center;

					image {
						display: block;
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
						border-radius: 8rpx;
					}

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #87A198;
						line-height: 40rpx;
					}
				}

				.status {
					font-size: 28rpx;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.8);
					line-height: 40rpx;

					&_1 {
						color: #ff7614;
					}

					&_2 {
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}

			.ticket-card {
				margin-top: 24rpx;
				box-sizing: border-box;
				min-height: 148rpx;
        border-bottom: 4rpx dashed rgba(0,0,0,0.1);
				.top {
					display: flex;
					justify-content: space-between;
			
					.ticket-name {
						font-size: 32rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.8);
						line-height: 44rpx;
						display: flex;
						align-items: center;
						
					}
			
					.ticket-price {
						font-size: 32rpx;
						font-family: D-DIN-Bold, D-DIN;
						font-weight: 700;
						color: rgba(0, 0, 0, 0.8);
						line-height: 34rpx;
					}
				}
			
				.bottom {
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;
			
					.ticket-validity {
			      font-size: 28rpx;
			      font-weight: 400;
			      color: #3FAA73;
			      line-height: 40rpx;
						display: flex;
						align-items: center;
						.tcan {
			        font-size: 28rpx;
			        font-weight: 400;
			        color: rgba(0,0,0,0.5);
			        line-height: 40rpx;
							margin-left: 16rpx;
			        margin-right: 16rpx;
						}
					}
			    .tnum {
						margin-left: 16rpx;
			      font-size: 28rpx;
			      font-weight: 400;
			      color: rgba(0,0,0,0.7);
			      line-height: 40rpx;
					}
				}
			}
		}

		.pay_cou {
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.5);
				line-height: 40rpx;
			}

			.cou_num {
				font-size: 28rpx;
				font-weight: 400;
				color: #FF7614;
				line-height: 44rpx;
			}
		}

		.pay {
			position: relative;
			margin-top: 36rpx;
			text-align: right;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.7);
			line-height: 40rpx;

			text {
				font-size: 32rpx;
				font-family: D-DIN-Bold, D-DIN;
				font-weight: 700;
				color: #ff7614;
				line-height: 34rpx;
			}
		}

		.order-info-tip {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.5);
			line-height: 40rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				display: block;
				margin-left: 8rpx;
			}
		}

		.card-code {
			margin-top: 24rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
      border: 4rpx solid #3FAA73;
			padding: 24rpx;
			text-align: center;

			.tip {
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi 2-75 SemiBold, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #3d3d3d;
				line-height: 44rpx;
        margin-bottom: 72rpx;
        margin-top: 24rpx;
			}

			.qr-code {
				margin: 24rpx auto 0;
				width: 300rpx;
				height: 300rpx;
				background: #ffffff;
        margin-bottom: 96rpx;
			}
      .card-item{
        width: 100%;
        border-top: 2rpx solid rgba(0,0,0,0.1);
        .card-title {
          font-size: 32rpx;
          font-weight: 700;
          color: #3d3d3d;
          line-height: 44rpx;
          margin-top: 24rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          image{
            height: 32rpx;
            width: 32rpx;
          }
        }
        .item{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          margin-top: 24rpx;
          text{
            flex: 0 0 auto;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(0,0,0,0.5);
            line-height: 40rpx;
            margin-right: 48rpx;
          }
          text:first-child{
            color: rgba(0,0,0,0.7);
          }
          text:last-child{
            margin-right: 0 !important;
          }
        }
      }
		}

		.card-info {
			margin-top: 32rpx;
		}

		.mt24 {
			margin-top: 24rpx;
		}
		.info-item {
			margin-top: 24rpx;
			background: #ffffff;
			padding: 32rpx 24rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
      .card-info-title {
        font-size: 32rpx;
        font-weight: 700;
        color: #3d3d3d;
        line-height: 44rpx;
        margin-bottom: 24rpx;
      }
      .item{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text{
          flex: 0 0 auto;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.5);
          line-height: 40rpx;
          margin-right: 48rpx;
        }
        text:first-child{
          color: rgba(0,0,0,0.7);
        }
        text:last-child{
          margin-right: 0 !important;
        }
      }
			.name {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.8);
				line-height: 44rpx;
			}

			.tag {
				margin-left: 10rpx;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2-45 Light, Alibaba PuHuiTi 20;
				font-weight: 300;
				color: #3FAA73;
				line-height: 32rpx;
				background: rgba(77, 134, 247, 0.102);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 0 8rpx;
			}

			.p {
				display: flex;
				align-items: center;

				.label {
					margin-right: 48rpx;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: rgba(0,0,0,0.7);
					line-height: 40rpx;
				}

				.label-text {
					flex: 1;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.5);
					line-height: 40rpx;
				}
			}
		}

		.btns {
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
			height: 124rpx;
			background: #ffffff;
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			display: flex;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			align-items: center;
			justify-content: flex-end;
			z-index: 1;

			.btn {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				min-width: 212rpx;
				padding: 0 28rpx;
				height: 88rpx;
				border: 0;
				font-size: 28rpx;
				font-weight: 400;
				border-radius: 44rpx;
        margin-right: 24rpx;

				&.outline {
					border: 2rpx solid #b7c1ca;
					color: #777f8f;
				}

				&.icon-service {
					image {
						display: block;
						width: 34rpx;
						height: 34rpx;
						margin-right: 14rpx;
					}
				}

				&.w422 {
					width: 422rpx;
				}

				&.w240 {
					width: 240rpx;
				}

				&.primary {
					background: #3FAA73;
					color: #fff;
				}
			}
		}

		.popup-content {
			background: #f7f9fa;
			padding: 32rpx;

			.title {
				position: relative;
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi 2-75 SemiBold, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #3d3d3d;
				line-height: 44rpx;
				text-align: center;

				image {
					position: absolute;
					right: 0;
					top: 0;
					z-index: 1;
					display: block;
					width: 48rpx;
					height: 48rpx;
					cursor: pointer;
				}
			}
		}
	}
</style>